<template>
  <div class="app-container">
    <el-form :inline="true" :model="ProRessultVoQuery" class="demo-form-inline">
      <el-form-item label="员工姓名">
        <el-input
          v-model="ProRessultVoQuery.name"
          placeholder="请输入"
        ></el-input>
      </el-form-item>

      <el-form-item label="部门">
        <el-select v-model="ProRessultVoQuery.sector" placeholder="请选择">
          <el-option
            v-for="sector in sectorList"
            :key="sector.sectorid"
            :label="sector.sector"
            :value="sector.sectorid"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="职位">
        <el-select v-model="ProRessultVoQuery.post" placeholder="请选择">
          <el-option
            v-for="post in postList"
            :key="post.postid"
            :label="post.post"
            :value="post.postid"
          />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="reseDdta">重置</el-button>
      </el-form-item>

      <div>
        <br />

        <p
          style="
            margin: 1;
            background-color: lightcyan;
            width: auto;
            height: 30px;
            padding-top: 10px;
          "
        >
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;当前离职员工:&nbsp;&nbsp;&nbsp;{{
            this.total
          }}人&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;本月离职:&nbsp;&nbsp;&nbsp;{{
            this.count1
          }}&nbsp;人
        </p>
      </div>
    </el-form>

    <el-table :data="list" border style="width: 120%">
      <el-table-column fixed label="序号" width="100" align="center">
        <template slot-scope="scope">
          {{ (page - 1) * limit + scope.$index + 1 }}
        </template>
      </el-table-column>

      <el-table-column prop="name" label="姓名" width="180" align="center">
        <template slot-scope="scope">
          <router-link type="primary" v-bind:to="'/hr/eait/' + scope.row.id">
            <el-link type="primary">{{ scope.row.name }}</el-link>
          </router-link>
        </template>
      </el-table-column>

      <el-table-column prop="id" label="工号" width="100" align="center">
      </el-table-column>
      <el-table-column
        prop="gmtDeparture"
        label="离职时间"
        width="151"
        align="center"
        type="datetime"
        value-format="yyyy-MM-dd HH:mm:ss"
        format="yyyy-MM-dd HH:mm:ss"
      >
      </el-table-column>
      <el-table-column prop="post" label="职位" width="180" align="center">
      </el-table-column>
      <el-table-column prop="grades" label="职级" width="100" align="center">
      </el-table-column>
      <el-table-column prop="sector" label="部门" width="142" align="center">
      </el-table-column>
      <el-table-column
        prop="organization"
        label="组织"
        width="120"
        align="center"
      >
      </el-table-column>

      <el-table-column
        prop="gmtModified"
        label="最新跟进日期"
        sortable
        align="center"
      >
      </el-table-column>
    </el-table>
    <!-- 分页查询 -->
    <el-pagination
       background
      :current-page="page"
      :page-size="limit"
      :total="total"
      style="padding: 30px 0; text-aling: center; float: right"
      layout="total,prev,pager,next,jumper"
      @current-change="getList"
    />

  </div>

</template>

<script>
import profilesApi from "@/api/hr/profiles";
import sectorApi from "@/api/hr/sector";
import positionApi from "@/api/hr/position";
import gradesApi from "@/api/hr/grades";
import Tinymce from "@/components/Tinymce";
export default {
  components: { Tinymce },
  data() {
    return {
      formLabelWidth: "120px",
      list: [],
      page: 1,
      limit: 5,
      total: 0,
      count1: "",
      // 添加数据
      form: {
        id: "",
        gradesid: "",
        gmtBoard: "",
        postid: "",
        sectorid: "",
        name: "",
        number: "",
        email: "",
        grades: "",
      },

      //模糊查询
      ProRessultVoQuery: {
        name: "",
        sector: "",
        post: "",
        organization: "",
      },
      //下拉
      organizationList: [],
      postList: [],
      sectorList: [],
      gradesList: [],

      gmtDeparture: "",
    };
  },
  created() {
    //页面渲染之前执行，一般调用method里面定义的方法
    this.getList();
    this.getSeclist();
    this.getPoslist();
    this.getGralist();
    this.countPro();
  },
  methods: {
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },

    countPro() {
      profilesApi.countPro().then((response) => {
        this.count1 = response.data.count;
      });
    },

    onSubmit() {
      profilesApi
        .conditionPro(1, this.limit, this.ProRessultVoQuery)
        .then((res) => {
          console.log(res);
          this.page = 1;
          this.list = res.data.rows;
          this.total = res.data.total;
        });
    },

    //添加信息

    //职级类型
    getGralist() {
      gradesApi.getGralist().then((response) => {
        this.gradesList = response.data.item;
      });
    },

    //获取部门列表
    getSeclist() {
      sectorApi.getSeclist().then((response) => {
        console.log(response.data.sectorList);
        this.sectorList = response.data.sectorList;
        console.log(this.sectorList);
      });
    },

    //获取职位列表
    getPoslist() {
      positionApi.getPoslist().then((response) => {
        console.log(response.data.postList);
        this.postList = response.data.positionList;
        console.log(this.postList);
      });
    },

    getList(page = 1) {
      this.page = page;
      profilesApi
        .getProListPage1(this.page, this.limit, this.ProRessultVoQuery)
        .then((response) => {
          //成功
          //response接口返回数据
          console.log(response);
          this.list = response.data.rows;
          this.total = response.data.total;
        })
        .catch((error) => {
          console.log(error);
        }); //失败
    },
    reseDdta() {
      this.ProRessultVoQuery = {};
      this.getList();
      this.countPro();
    },
  },
};
</script>
<style>
.el-descriptions__body .el-descriptions__table .el-descriptions-item__cell {
  font-weight: 0;
}

.el-descriptions .is-bordered .el-descriptions-item__cell {
  width: 10px;
  height: 10px;
}
.el-tabs__nav-scroll {
  margin: 30px;
}
</style>